<template>
	<view>
		<cu-custom bgColor="bg-maincolor" :isBack="true">
			<block slot="content">
				实训圈
			</block>
		</cu-custom>
		<view class="one_box">
			<image class="img_school" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F25%2F20150825223259_ds5rL.jpeg&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636767909&t=653310684e05922336f9e15c6abd39e4" mode="aspectFill"></image>
		</view>
		<view class="profile_picture">
			<image  class="tx_picture" :src="handimge" mode="aspectFill"></image>
		</view>
		<view style="margin-top: 35rpx; padding-top: 20rpx;">
		
			<view class="tow_box" v-for="(item,index) in list" :key='index' :style="(index===0)?'border-top-width: 0rpx;':''">
				<view class="flex">
					<image class="tx_box" :src="item.avatar"></image>
					<view class="center_box">
						<view class="name_text">{{item.nickname}}</view>
						<view class="text_box">{{timeToStr(item.add_time,'MM-dd hh:mm')}}</view>
					</view>
				</view>
				<view class="editor_box">{{item.content}}</view>
					<block v-if="item.type==1">
						<view class="imagelist flex" >
								<image v-for="(image,imageIndex) in item.images" :key='imageIndex' :src="image" class="image_box" @tap="previewImage(image,index)"  mode="aspectFill">
								</image>
						</view>
					</block>
					<block v-if="item.type==3">111</block>
				<view class="goodBox">
					<view class="but_box">··</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {appLogin,httpGet,httpPost,timeToStr} = require("@/utils/common.js")
	export default {
		data() {
			return {
				timeToStr:timeToStr,
				user_id:0,
				last_circle_id:0,
				handimge:"https://img.ivsky.com/img/tupian/t/201606/30/meiruhuadezhaoyangyuxiyangtupian-001.jpg",
				img_list:[],
				list:[],
			}
		},
		onLoad() {
			appLogin((user_info)=>{
				console.log(user_info)
				this.handimge = user_info.avatar
			})
		},
		onShow(){
			// this.list = [];
			// 清空列表
			this.display()
			// 回到页面展示
		},
		onReachBottom(){   // 页面滚动到底部
		this.last_circle_id = this.list[this.list.length-1].circle_id
			this.display()		
		},
		methods: {
			previewImage(image,index){
				console.log(this.list,index)
				uni.previewImage({
					current:image,
					urls: this.list[index].images,
				})
			},
			display(){
				httpGet({
					url:'/api/circle/list',
					data:{
						user_id:this.user_id,
						last_circle_id:this.last_circle_id,						
					}
				}).then((res) => {
					console.log(res)
					this.list = this.list.concat(res.result.list)
				})
			}
		}
	}
</script>

<style>
	
	page{
		background-color: #FFFFFF;
	}
	
	.one_box{
		height: 465rpx;
	}
	
	.img_school{
		height: 465rpx;
		width: 100%;
	}
	
	.profile_picture{
		position: absolute;
		right: 20rpx;
		margin-top: -75rpx;
		width: 122rpx;
		height: 122rpx;
		border-radius: 15rpx;
	}
	
	.tx_picture{
		width: 122rpx;
		height: 122rpx;
		border-radius: 15rpx;
	}
	
	.tow_box{
		border-width: 1rpx;
		border-top-style: solid;
		border-color: #eeeeee;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		padding-left: 45rpx;
		padding-right: 30rpx;
		background-color: #FFFFFF;
		margin-bottom: 50rpx;
	}
	
	.tx_box{
		width: 102rpx;
		height: 102rpx;
		border-radius: 10rpx;
	}
	
	.center_box{
		margin-top: 7rpx;
		margin-left: 30rpx;
	}
	
	.name_text{
		color: #586b95;
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.text_box{
		font-size: 22rpx;
		color: #999999;
	}
	
	.editor_box{
		margin-top: 39rpx;
		color: #333333;
		font-size: 31rpx;
	}
	
	.imagelist{
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
	}
	
	.image_box{
		width: 210rpx;
		height: 210rpx;
		margin-bottom: 15rpx;
		margin-right: 15rpx;
	}
	
	.but_box{
		position: absolute;
		right: 0;
		width: 60rpx;
		height: 38rpx;
		border-radius: 20rpx;
		background-color: #f8f8f8;
		text-align: center;
		line-height: 38rpx;
		font-size: 45rpx;
		color: #3e5786;
		font-weight: bold;
		border-color:  #f8f8f8;
	}
	
	.goodBox{
		position: relative;
		height: 40rpx;
		background-color: #FFFFFF;
	}
</style>
